<template>
 	<div class="system_type">
 		<div class="systemcontent">
 			<div style="margin-bottom: 10px;"><el-button @click="showAddaprove">添加一级审批流</el-button></div>
 			<el-tree
		      :data="approveList"
		      :props="threeProps"
		      :expand-on-click-node="false">
		      <span class="custom-tree-node" slot-scope="{ node, data }">
		        <p>
		        	<span @click="goTemp(node,data)">{{ data.name }}</span>
		        </p>
		        <span>
		          <el-switch
					v-model="data.is_vaild"
					:active-value=1
					size=""
					 v-if="!('list' in data)"
					 active-text="有效"
					 inactive-text="无效"
					disabled>
				  </el-switch>
		          <el-button
		            type="text"
		            size="mini"
		            v-if="'list' in data"
		            @click="showAddaprove(data)">
		            	添加元素
		          </el-button>
		          <el-button
		          	style="color:#E6A23C;"
		            type="text"
		            size="mini"
		            v-if="'list' in data"
		            @click="treeNodeDel(node, data)">
		            	删除元素
		          </el-button>
		        </span>
		      </span>
		    </el-tree>
 		</div>
 		<div class="systemright">
 			<div class="phone">
	 			<div class="statusbar"></div>
	 			<div class="phone-content">
	 				<div class="show_phone_li">
	 					<el-row v-for="item in approveList">
	 					  <el-col :span="24">
	 					  	<p style="font-weight: 600;padding-left:10px;">{{item.name}}</p>
	 					  </el-col>
						  <el-col  v-if="ite.is_vaild == 1" :span="6" style="margin-bottom: 10px;" v-for="ite in item.list">
						  	<div @click="goTemp(item,ite)" class="phone_li-grid">
						  		<img :src="base_url+ite.url" alt="" />
						  		<span>{{ite.name}}</span>
						  	</div>
						  </el-col>
						</el-row>
	 				</div>
	 			</div>
	 		</div>
 		</div>
 		<!--public 公共弹框-->
 		<el-dialog
		  title="添加审批类型"
		  :visible.sync="firApprove.visable"
		  width="350px"
		  :before-close="handleClose">
		  <p v-show="firApprove.type_name"><span>审批类型名称:</span> <el-input maxlength="5" style="width:200px;" v-model="firApprove.name"></el-input></p>
		  <p v-show="!firApprove.type_name"><span>审批类型名称:</span> <el-input  style="width:200px;" v-model="firApprove.name"></el-input></p>
		  <p><span>上传类型图片:</span></p>
		  <p>
		  	<el-upload
			  action="https://jsonplaceholder.typicode.com/posts/"
			  list-type="picture-card"
			  show-file-list="true"
			  :on-remove="handleRemove"
			  :http-request="upLoadFile"
			  :limit="1"
			  >
			  <i class="el-icon-plus"></i>
			</el-upload>
		  </p>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="firApprove.visable = false">取 消</el-button>
		    <el-button type="primary" @click="addApprove">确 定</el-button>
		  </span>
		</el-dialog>
 	</div>
</template>

<script>
    import { fileUpload,Login} from '@/assets/util/api.js'
    import { getUrlHost } from '@/assets/util/util_base.js'
    import { approveAddType,approveGetAllTemplate,approveDeleteType} from '@/assets/util/approve_api.js'
  export default {
    data() {
      return {
       	approveList: "",
       	firApprove:{
       		template_name:"",
       		template_url:"",
       		type_name:"",
       		type_url:"",
       		name:"",
       		visable:false,//是否可见
       		url:"",//image路径
       		isvaild:true,
       	},
       	 threeProps: {
          children: 'list',
          label: 'name',
          isLeaf: true
        },
       	access_token:"",
       	base_url:getUrlHost(),
      };
    },
    watch:{
    	'$route' (to, from) {this.approveGetAllTemplate();},
    },
    mounted(){
    	this.access_token = this.inStorage("get","access_token");
    	this.approveGetAllTemplate();
    },
    methods: {
     showAddaprove(data){
     	var _this = this;
     	console.log(data);
     	if(!data){
     		_this.firApprove.type_name = '';
     		_this.firApprove.type_url = '';
     	}else{
     		_this.firApprove.type_name = data.name;
     		_this.firApprove.type_url = data.url;
     	}
     	this.firApprove.visable = true;
     },
     handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      upLoadFile(res){
      	var _this = this;
      	console.log(res);
      	let formData = new  FormData();
      	formData.append("img",res.file);
	    fileUpload(this,formData).then(res=>{
	    	console.log(res)
	    	if(res.data.state){
	    		_this.firApprove.url = res.data.data[0];
	    	}
	    }).catch(res=>{
	    	console.log(res)
	    })
     },
     addApprove(){
     	let _this = this;
     	if(!_this.firApprove.url){
     		_this.$message.error("请先上传图片！");
     		return;
     	}
     	if(!_this.firApprove.name){
     		_this.$message.error("类型名不可为空!");
     		return;
     	}
     	if(!_this.firApprove.type_name){
     		_this.firApprove.type_name = _this.firApprove.name;
     		_this.firApprove.type_url = _this.firApprove.url;
     		_this.firApprove.template_name = '';
     		_this.firApprove.template_url = '';
     	}else{
     		_this.firApprove.template_name = _this.firApprove.name;
     		_this.firApprove.template_url = _this.firApprove.url;
     	}
     	let params = {
     		access_token:this.access_token,
     		type_name:_this.firApprove.type_name,
     		url:_this.firApprove.type_url,
     		template_name:_this.firApprove.template_name,
     		template_url:_this.firApprove.template_url
     	};
     	approveAddType(this,params).then(res=>{
     		console.log(res);
     		if(res.data.state == true){
			   	_this.$message.success("添加成功！");
			   	_this.firApprove.visable = false;
			   	_this.approveGetAllTemplate();
			}
			if(res.data.code){
				_this.$message.error(_this.publicMsg(res.data.code,res.data.error));
			}
     	}).catch(res=>{
     		console.log(res)
     	})
     },
     //获取审批类型
     approveGetAllTemplate(){
     	var _this = this;
     	let params = {
     		access_token:this.access_token
     	}
     	approveGetAllTemplate(this,params).then(res=>{
     		console.log(res)
     		if(res.data.state){
     			_this.approveList = res.data.data;
     		}
     	}).catch(res=>{
     		console.log(res)
     	})
     },
     //删除树形结构子节点
     treeNodeDel(node,data){
     	var _this = this;
     	let params={
     		access_token:this.access_token,
     		name:data.name
     	}
     	approveDeleteType(this,params).then(res=>{
     		console.log(res)
     		if(res.data.state == true){
			    _this.$message.success("删除成功！");
			    _this.approveGetAllTemplate();
			    const parent = node.parent;
		        const children = parent.data.list|| parent.data;
		        const index = children.findIndex(d => d.id === data.id);
		        children.splice(index, 1);
			}
			if(res.data.code){
				 _this.$message.error(_this.publicMsg(res.data.code,res.data.error));
			}
     	}).catch(res=>{
     		console.log(res)
     	})
     },
     goTemp(item,ite){
     	if(!ite.list && item.label){
	     	this.RouterTo(this,'/approveSystemTemplate',{'params':JSON.stringify({'parent':{name:item.parent.label},"Info":ite})})
     	}else{
     		this.RouterTo(this,'/approveSystemTemplate',{'params':JSON.stringify({'parent':item,"Info":ite})})
     	}
     }
    }
  }
 
</script>
<style lang="scss" scoped>
  .system_type{
  	width: 100%;
  	.systemcontent{
  		width: 50%;
  		padding-right:10px;
  		box-sizing: border-box;
  		float: left;
  		.custom-tree-node {
		    flex: 1;
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    font-size: 14px;
		    padding-right: 8px;
		  }
  	}
  	.systemright{
  		width: 50%;
  		float: right;
  	}
  	.phone{
  		margin: 0 auto;
	    position: relative;
	    background: #111;
	    border-radius: 55px;
	    box-shadow: 0px 0px 0px 2px #aaa;
	    width: 320px;
	    height: 568px;
	    padding: 105px 25px;
	    -webkit-box-sizing: content-box;
	    box-sizing: content-box;
	    .statusbar{
	    	position: absolute;
		    width: 320px;
		    height: 20px;
		    background: url(../../assets/images/phone-tab.png);
		    left: 50%;
		    margin-left: -160px;
		    top: 100px;
		    -webkit-background-size: 100% auto;
		    background-size: 100% auto;
	    }
	    .phone-content{
	    	width: 320px;
		    height: 100%;
		    display: block;
		    width: 100%;
		    margin-top: 20px;	
		    overflow: auto;
		    background-color: #fff;
		    .phone_li-grid{
		    	display: flex;
		    	cursor: pointer;
		    	justify-content: center;
		    	align-items: center;
		    	flex-direction: column;
		    	img{
		    		width: 45px;
		    		height:45px;
		    	}
		    	span{
		    		margin-top: 5px;
		    		color: #666;
		    		font-size: 12px;
		    	}
		    }
	    }
	    .show_phone_li{
	    	border-top:1px solid #ccc;
	    	padding-bottom:10px;
	    }
  	}
  	.phone:before {
	    content: '';
	    width: 60px;
	    height: 10px;
	    border-radius: 10px;
	    position: absolute;
	    left: 50%;
	    margin-left: -30px;
	    background: #333;
	    top: 50px;
	}	
  }
</style>

